<style>
    .dropzonehighlight {
        border: #155D97 dashed 5px;
        border-radius: 20px;
        background-color: rgba(255,255,255,0.8);
        text-align: center;
    }
    .overdropzone {
        border: #5D9715 solid 5px;        
    }
    mat-list-item .visibleOnHover {
        display: none;
    }
    mat-list-item:hover .visibleOnHover {
        display: inherit;
    }
    </style>
<div style="display: flex; flex-direction: column; width: 100%; height: 100%">
    <div>
    <mat-toolbar style="width: 100%; display: flex;">        
        <button mat-button (click)="goToParent(-1)">Files</button>            
        <ng-container *ngFor="let dir of filebrowserservice.currentpath | async; let ndx=index">
            <mat-icon>chevron_right</mat-icon>
            <button mat-button (click)="goToParent(ndx)">{{dir}}</button>            
        </ng-container>
        <span style="flex-grow: 1"></span>
        <button mat-icon-button (click)="createFolder()" matTooltip="New folder">
            <mat-icon>create_new_folder</mat-icon>
        </button>
        <button mat-icon-button (click)="attachFilesClicked()" matTooltip="Upload file">
            <mat-icon>file_upload</mat-icon>
        </button>
        <input #attachmentFileUploadInput type="file" [hidden]="true" multiple (change)="onFilesSelected($event)" />
    </mat-toolbar>
    </div>
    <mat-progress-bar *ngIf="uploadprogress!=null" style="width: 100%"
            mode="determinate"
            [value]="uploadprogress"
        >
    </mat-progress-bar>        
    <div
        *ngIf="showDropZone"
        style="flex-grow: 1"
        [ngClass]="{'dropzonehighlight': showDropZone, 'overdropzone': draggingOverDropZone}" 
        (dragover)="draggingOverDropZone=true" 
        (dragleave)="draggingOverDropZone=false" 
        (drop)="dropFiles($event)">
        <h1>Drop files here</h1>                              
    </div>
    
    <div style="overflow-y: auto; flex-grow: 1" *ngIf="!showDropZone">
        <mat-nav-list>
            <ng-container *ngFor="let file of fileList | async">
                <ng-container *ngIf="file===renameFile">
                    <mat-list-item>
                        <mat-icon mat-list-icon *ngIf="file.isDir">folder</mat-icon>
                        
                        <mat-form-field mat-line>
                            <input matInput [(ngModel)]="newFileName" />
                        </mat-form-field>
                    
                        <button mat-icon-button (click)="rename(file)">
                            <mat-icon>done</mat-icon>
                        </button>
                        <button mat-icon-button (click)="renameFile=null">
                            <mat-icon>cancel</mat-icon>
                        </button>
                    </mat-list-item>
                </ng-container>
                <ng-container *ngIf="file!==renameFile">
                    <mat-list-item *ngIf="file.isDir && file.name!=='.' && file.name!=='..'">
                        <mat-icon mat-list-icon *ngIf="file.isDir">folder</mat-icon>
                        <a (click)="changedir(file)" mat-line>{{file.name}}</a> 
                        <span class="visibleOnHover">
                            <button mat-icon-button (click)="newFileName=file.name;renameFile=file">
                                <mat-icon>edit</mat-icon>
                            </button>
                            <button mat-icon-button (click)="deleteDir(file)">
                                <mat-icon>delete</mat-icon>
                            </button>
                        </span>
                    </mat-list-item>

                    <a mat-list-item
                        (click)="changedir(file)" 
                        *ngIf="
                            file.isDir && file.name==='..'
                            && (filebrowserservice.currentpath | async).length > 0
                        "
                        >
                        <mat-icon mat-list-icon *ngIf="file.isDir">arrow_back</mat-icon>
                    </a>
                    
                    <mat-list-item *ngIf="!file.isDir"
                        [ngClass]="{'filewithmergeconflict': file.conflict}"
                        >
                        <a mat-line (click)="openFile(file)">{{file.name}}</a>                        
                        <span class="visibleOnHover">
                            <button mat-icon-button (click)="editFile(file)">
                                <mat-icon>edit</mat-icon>
                            </button>
                            <button mat-icon-button (click)="deleteFile(file)">
                                <mat-icon>delete</mat-icon>
                            </button>
                        </span>
                    </mat-list-item>

                </ng-container>
            </ng-container>
        </mat-nav-list>            
    </div>
</div>